"use client";

import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import VideoGrid from "./VideoGrid";
import { VideoCardProps } from "./VideoCard";

// Sample video data
const featuredVideos: VideoCardProps[] = [
  {
    id: "1",
    title: "大川西 | 一镜到底长镜头记录绝美风光",
    thumbnailUrl: "https://ext.same-assets.com/2190727564/437181911.avif",
    duration: "9:38",
    viewCount: "38.2万",
    publisherName: "风光频道"
  },
  {
    id: "2",
    title: "天命姬舞 | 全新动画角色登场",
    thumbnailUrl: "https://ext.same-assets.com/3044952215/3333210367.avif",
    duration: "3:05",
    viewCount: "11.3万",
    publisherName: "天命工作室"
  },
  {
    id: "3",
    title: "【瓶子】逆天！80后竟然爱听这些...",
    thumbnailUrl: "https://ext.same-assets.com/213055778/2641810356.avif",
    duration: "1:19:22",
    viewCount: "20.4万",
    publisherName: "瓶子君"
  },
  {
    id: "4",
    title: "5W买到什么车？二手车市场探秘",
    thumbnailUrl: "https://ext.same-assets.com/2190727564/437181911.avif",
    duration: "9:38",
    viewCount: "38.2万",
    publisherName: "车评人"
  },
  {
    id: "5",
    title: "This is me MV | 热门电影原声",
    thumbnailUrl: "https://ext.same-assets.com/3188453284/2751708599.avif",
    duration: "3:41",
    viewCount: "10.4万",
    publisherName: "电影频道"
  },
  {
    id: "6",
    title: "AI生成技术革命：未来已来 10大应用场景",
    thumbnailUrl: "https://ext.same-assets.com/816208608/975462818.avif",
    duration: "4:52",
    viewCount: "15.1万",
    publisherName: "AI研究所"
  },
  {
    id: "7",
    title: "【美食vlog】自制日式拉面详细教程",
    thumbnailUrl: "https://ext.same-assets.com/1827414379/2533024759.avif",
    duration: "15:06",
    viewCount: "13.3万",
    publisherName: "美食作家王刚"
  },
  {
    id: "8",
    title: "2025年最值得期待的10部动画电影",
    thumbnailUrl: "https://ext.same-assets.com/1601968267/1912477126.avif",
    duration: "23:42",
    viewCount: "11.5万",
    publisherName: "动画评论"
  },
  {
    id: "9",
    title: "《明朝那些事儿》有声书 第八集",
    thumbnailUrl: "https://ext.same-assets.com/4059540623/1169942227.avif",
    duration: "1:54",
    viewCount: "15.3万",
    publisherName: "历史频道"
  },
  {
    id: "10",
    title: "【科普】政府的钱从哪里来？",
    thumbnailUrl: "https://ext.same-assets.com/2185276445/1921994304.avif",
    duration: "24:12",
    viewCount: "35.4万",
    publisherName: "深度调查"
  }
];

const animeVideos = featuredVideos.slice(0, 5);
const gameVideos = featuredVideos.slice(3, 8);
const musicVideos = featuredVideos.slice(2, 7);
const techVideos = featuredVideos.slice(5, 10);

export default function FeaturedVideos() {
  return (
    <div className="container mx-auto py-4">
      <Tabs defaultValue="recommend" className="w-full">
        <div className="flex items-center justify-between mb-4">
          <TabsList>
            <TabsTrigger value="recommend">推荐</TabsTrigger>
            <TabsTrigger value="anime">动画</TabsTrigger>
            <TabsTrigger value="game">游戏</TabsTrigger>
            <TabsTrigger value="music">音乐</TabsTrigger>
            <TabsTrigger value="tech">科技</TabsTrigger>
          </TabsList>
          <a href="#" className="text-sm text-primary hover:underline">
            更多
          </a>
        </div>

        <TabsContent value="recommend">
          <VideoGrid videos={featuredVideos} />
        </TabsContent>

        <TabsContent value="anime">
          <VideoGrid videos={animeVideos} />
        </TabsContent>

        <TabsContent value="game">
          <VideoGrid videos={gameVideos} />
        </TabsContent>

        <TabsContent value="music">
          <VideoGrid videos={musicVideos} />
        </TabsContent>

        <TabsContent value="tech">
          <VideoGrid videos={techVideos} />
        </TabsContent>
      </Tabs>
    </div>
  );
}
